<template>
    <div>
      <headCommod/>
      <div class="main">
        <div class="container cl">
          <el-form class="wj-form" ref="form" :model="form" label-width="100px">

            <div class="fcl-box to-right">
              <h3>进口商信息</h3>
              <el-form-item label="进口商">
                <el-select v-model="form.region" placeholder="请选择">
                  <el-option label="1" value="1"></el-option>
                  <el-option label="2" value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="授权书">
                <el-upload
                  class="upload-demo"
                  action=""
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :before-remove="beforeRemove"
                  multiple
                  :limit="3"
                  :on-exceed="handleExceed"
                  :file-list="fileList">
                  <el-button size="small" type="success" plain>点击上传</el-button>
                </el-upload>
              </el-form-item>
            </div>

            <div class="fcl-box to-left">
              <h3>收货方信息</h3>
              <el-form-item label="地址类型">
                <el-select v-model="form.region" placeholder="请选择">
                  <el-option label="FBA地址" value="1"></el-option>
                  <el-option label="商业地址" value="2"></el-option>
                  <el-option label="私人住宅地址" value="3"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="国家">
                <el-select v-model="form.region" placeholder="请选择">
                  <el-option label="1" value="1"></el-option>
                  <el-option label="2" value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="收货人">
                <el-select v-model="form.region" placeholder="请选择">
                  <el-option label="1" value="1"></el-option>
                  <el-option label="2" value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="FBA CODE">
                <el-select v-model="form.region" placeholder="请选择">
                  <el-option label="1" value="1"></el-option>
                  <el-option label="2" value="2"></el-option>
                </el-select>
              </el-form-item>
            </div>

            <div class="fcl-box to-right">
              <h3>订单信息</h3>
              <el-form-item label="渠道">
                <el-select v-model="form.region" placeholder="请选择">
                  <el-option label="1" value="1"></el-option>
                  <el-option label="2" value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="总件数">
                <el-input/>
              </el-form-item>

              <el-form-item label="Shipment ID">
                <el-input/>
              </el-form-item>
              <el-form-item label="Reference ID">
                <el-input placeholder="多个逗号隔开"/>
              </el-form-item>
              <el-form-item label="是否购买保险">
                <el-select v-model="form.region" placeholder="请选择">
                  <el-option label="1" value="1"></el-option>
                  <el-option label="2" value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="投保金额">
                <el-input/>
              </el-form-item>
              <el-form-item label="保险币种">
                <el-select v-model="form.region" placeholder="请选择">
                  <el-option label="RMB" value="1"></el-option>
                  <el-option label="USD" value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="被保人">
                <el-select v-model="form.region" placeholder="请选择">
                  <el-option label="1" value="1"></el-option>
                  <el-option label="2" value="2"></el-option>
                </el-select>
              </el-form-item>
            </div>

            <div class="fcl-box to-left">
              <h3>报关信息</h3>
              <el-form-item label="买单退税">
                <el-select v-model="form.region" placeholder="请选择">
                  <el-option label="1" value="1"></el-option>
                  <el-option label="2" value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="报关文件上传">
                <el-upload
                  class="upload-demo"
                  action=""
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :before-remove="beforeRemove"
                  multiple
                  :limit="3"
                  :on-exceed="handleExceed"
                  :file-list="fileList"
                  style="float: left;margin-right: 20px;">
                  <el-button size="small" type="success" plain>点击上传</el-button>
                </el-upload>
                <a href="">买单报关模板下载</a>
                <a href="">退税报关模板下载</a>
              </el-form-item>
            </div>

            <div class="fcl-box to-right">
              <h3>交货信息</h3>
              <el-form-item label="交货方式">
                <el-radio-group v-model="form.resource">
                  <el-radio label="客户自送货"></el-radio>
                  <el-radio label="大森林上门提货"></el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="交货仓库">
                <el-select v-model="form.region" placeholder="请选择">
                  <el-option label="1" value="1"></el-option>
                  <el-option label="2" value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="送货时间">
                <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
              </el-form-item>
              <el-form-item label="件数">
                <el-input/>
              </el-form-item>
              <el-form-item label="重量(KG)">
                <el-input/>
              </el-form-item>
              <el-form-item label="体积">
                <el-input/>
              </el-form-item>
              <el-form-item label="自送备注">
                <el-input/>
              </el-form-item>
            </div>

            <div class="fcl-box to-left">
              <h3>上门提货</h3>
              <el-form-item label="交货仓库">
                <el-select v-model="form.region" placeholder="请选择">
                  <el-option label="1" value="1"></el-option>
                  <el-option label="2" value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="提货联系人">
                <el-select v-model="form.region" placeholder="请选择">
                  <el-option label="1" value="1"></el-option>
                  <el-option label="2" value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="提货时间">
                <el-date-picker
                  v-model="value1"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="件数">
                <el-input/>
              </el-form-item>
              <el-form-item label="重量(KG)">
                <el-input/>
              </el-form-item>
              <el-form-item label="体积">
                <el-input/>
              </el-form-item>
              <el-form-item label="是否带尾板车">
                <el-radio-group v-model="form.resource">
                  <el-radio label="是"></el-radio>
                  <el-radio label="否"></el-radio>
                </el-radio-group>
                <div class="price">
                  <el-input placeholder="请输入内容" v-model="input2">
                    <template slot="append">元</template>
                  </el-input>
                </div>
              </el-form-item>
              <el-form-item label="是否需要搬运">
                <el-radio-group v-model="form.resource">
                  <el-radio label="是"></el-radio>
                  <el-radio label="否"></el-radio>
                </el-radio-group>
                <div class="price">
                  <el-input placeholder="请输入内容" v-model="input2">
                    <template slot="append">元</template>
                  </el-input>
                </div>
              </el-form-item>
            </div>

            <div class="fcl-box to-right">
              <h3>发票及装箱单</h3>
              <div>
                <el-button size="mini" type="success" plain>上传发票</el-button>
                <el-button size="mini" type="success" plain>导入产品</el-button>
                <el-button size="mini" type="success" plain>下载产品导入模板</el-button>
              </div>
              <br/>
              <el-table
                :data="tableData"
                style="width: 100%"
                :row-class-name="tableRowClassName">
                <el-table-column
                  prop="date"
                  label="中文品名">
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="英文品名">
                </el-table-column>
                <el-table-column
                  prop="件数（CTN）"
                  label="海关编码">
                </el-table-column>
                <el-table-column
                  prop="重量（KG）"
                  width="100px"
                  label="税率（%）">
                </el-table-column>
                <el-table-column
                  prop="体积（CBM）"
                  label="数量">
                </el-table-column>
                <el-table-column
                  prop="FBA标签"
                  label="单位">
                </el-table-column>
                <el-table-column
                  prop="地址信息"
                  label="单价">
                </el-table-column>
                <el-table-column
                  prop="地址信息"
                  label="总价">
                </el-table-column>
                <el-table-column
                  prop="地址信息"
                  width="100px"
                  label="箱数(CTNS)">
                </el-table-column>
               <el-table-column
                  prop="地址信息"
                  label="净重">
                </el-table-column>
               <el-table-column
                  prop="地址信息"
                  width="100px"
                  label="毛重(KGS)">
                </el-table-column>
               <el-table-column
                  prop="地址信息"
                  width="100px"
                  label="体积(CMB)">
                </el-table-column>
               <el-table-column
                  prop="地址信息"
                  label="材质">
                </el-table-column>
               <el-table-column
                  prop="地址信息"
                  label="用途">
                </el-table-column>
               <el-table-column
                  prop="地址信息"
                  label="制造商">
                </el-table-column>
               <el-table-column
                  prop="地址信息"
                  label="备注">
                </el-table-column>
               <el-table-column
                  prop="地址信息"
                  label="操作">
                </el-table-column>
               <el-table-column
                  prop="地址信息"
                  label="混装编码">
                </el-table-column>
              </el-table>
            </div>

            <div class="fcl-box to-left">
              <el-form-item label="产品申报">
                <el-checkbox-group v-model="form.type">
                  <el-checkbox label="纺织品" name="type"></el-checkbox>
                  <el-checkbox label="内置电" name="type"></el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="客户备注">
                <el-input type="textarea" v-model="form.desc"></el-input>
              </el-form-item>
            </div>

            <div class="fcl-box center to-right">
              <el-button type="success" style="width: 400px;">提交订单</el-button>
            </div>

          </el-form>
        </div>
      </div>
    </div>
</template>

<script>
import headCommod from '../components/Head'

export default {
  name: 'fcl',
  data () {
    return {
      form: {
        type: [],
        tableData: []
      }
    }
  },
  mounted () {
  },
  components: {
    headCommod
  }
}
</script>

<style scoped>
  .price {
    float: left;
    position: absolute;
    top: 0px;
    left: 150px;
  }
</style>
